<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    height="auto"
    :title="moduleObj.id === '' ? $t('sourceModel.addModule') : $t('sourceModel.updateModule')"
    class="win-module"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="saveModule"
    @close="cancelModule"
  >
    <je-form layout="vertical">
      <je-form-item :label="$t('sourceModel.moduleName')" v-bind="validateInfos.name">
        <je-input v-model:value="moduleObj.name" @change="changeName" />
      </je-form-item>
      <je-form-item :label="$t('sourceModel.moduleCode')" v-bind="validateInfos.code">
        <je-input v-model:value="moduleObj.code" :disabled="moduleObj.id != ''" />
      </je-form-item>
      <!-- <span v-if="moduleObj.id === ''" class="annotation">
        {{ $t('sourceModel.addHint') }}
      </span>
      <span v-if="moduleObj.id !== ''" class="annotation">
        {{ $t('sourceModel.updateHint') }}
      </span> -->
    </je-form>
  </je-modal>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { pinyin } from '@jecloud/utils';
  import { verifyData } from '@/helper/common';
  import { saveSourceAndModule, updateSourceAndModule } from '@/api/index';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalModule',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
    },
    props: {
      editModule: {
        type: Boolean,
        default: () => false,
      },
      moduleData: {
        type: Object,
        default: () => ({
          id: '',
          name: '',
          code: '',
        }),
      },
      parentId: {
        type: String,
        default: () => '',
      },
      productId: {
        type: String,
        default: () => '',
      },
    },
    emits: ['loadSourceTree', 'cancelEditModule'],
    setup(props, { emit }) {
      const state = reactive({
        visibleModule: true,
        moduleObj: { ...props.moduleData },
        rules: {
          name: verifyData.name,
          code: verifyData.code,
        },
      });
      const { resetFields, validate, validateInfos } = useForm(state.moduleObj, state.rules, {
        onValidate: (...args) => {},
      });
      const methods = {
        //保存/编辑模块
        saveModule({ $modal, button }) {
          const modal = $modal,
            btn = button;
          btn.loading = true;
          validate()
            .then(() => {
              //新增
              if (!props.moduleData.id && !props.moduleData.name && !props.moduleData.code) {
                const params = {
                  tableCode: 'JE_CORE_DATASOURCE', //表编码
                  funcCode: 'JE_CORE_DATASOURCE', //功能编码
                  DATASOURCE_TEXT: state.moduleObj.name, //名称
                  DATASOURCE_CODE: state.moduleObj.code, //编码
                  DATASOURCE_TYPE: 'MODULE', //类型
                  SY_PARENT: props.parentId || 'ROOT', //父id
                  SY_PRODUCT_ID: props.productId, //产品ID
                };
                saveSourceAndModule(params).then((res) => {
                  if (res.success) {
                    //关闭弹窗
                    btn.loading = false;
                    modal.close();
                    methods.resetModule();
                    Modal.notice('新建模块成功', 'success');
                    emit('loadSourceTree');
                  } else {
                    btn.loading = false;
                    Modal.alert(res.message, 'error');
                  }
                });
              } else {
                //编辑
                const params = {
                  tableCode: 'JE_CORE_DATASOURCE',
                  funcCode: 'JE_CORE_DATASOURCE',
                  JE_CORE_DATASOURCE_ID: state.moduleObj.id,
                  DATASOURCE_TEXT: state.moduleObj.name,
                  DATASOURCE_CODE: state.moduleObj.code,
                };
                updateSourceAndModule(params).then((res) => {
                  if (res.success) {
                    //关闭弹窗
                    btn.loading = false;
                    modal.close();
                    methods.resetModule();
                    Modal.notice('保存成功', 'success');
                    emit('loadSourceTree');
                  } else {
                    btn.loading = false;
                    Modal.alert(res.message, 'error');
                  }
                });
              }
            })
            .catch((error) => {
              btn.loading = false;
            });
          return false;
        },
        //关闭弹窗
        cancelModule() {
          state.visibleModule = false;
          methods.resetModule();
          emit('cancelEditModule');
        },
        //初始化数据
        resetModule() {
          resetFields();
          state.moduleObj = {
            id: '', //模块id
            name: '', //模块名称
            code: '', //模块编码
          };
        },
        //name值改变触发
        changeName() {
          if (!state.moduleObj.id) {
            state.moduleObj.code = pinyin(state.moduleObj.name, 'PY');
          }
        },
      };
      onMounted(() => {});
      return {
        resetFields,
        validateInfos,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .win-module {
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
    }
  }
</style>
